<template>

  <div>

    <div style="color: #ff3333; font-size: 12px; margin-bottom: 10px"> * 学员开始学习时的刷脸记录</div>

    <div v-if="dataList.length > 0">
      <image-preview :data-list="dataList" data-key="image">
        <template v-slot:append="scope">
          {{ scope.item.createTime }}
        </template>
      </image-preview>
    </div>

    <div v-else>
      <el-empty description="暂无人脸识别数据！"/>
    </div>

    <div style="margin-top: 20px"/>
    <el-button
      v-if="listQuery.current <= totalPage"
      :loading="loading"
      style="width: 100%"
      @click="load">
      加载更多
    </el-button>

  </div>

</template>

<script>
import DataTable from '@/components/DataTable'
import { facePaging } from '@/api/course/face'
import ImagePreview from '@/components/ImagePreview'

export default {
  name: 'CourseFaceList',
  components: { ImagePreview, DataTable },
  props: {
    courseId: {
      type: String,
      default: ''
    },
    userId: {
      type: String,
      default: ''
    },
    fileId: {
      type: String,
      default: ''
    }
  },
  data() {
    return {

      listQuery: {
        current: 1,
        size: 12,
        params: {
          courseId: '',
          userId: ''
        }
      },
      dataList: [],
      totalPage: 0,
      loading: false
    }
  },
  watch: {

    // 检测查询变化
    courseId: {
      handler(val) {
        this.listQuery.params.courseId = val
        this.listQuery.current = 1
        this.load()
      }
    },
    fileId: {
      handler(val) {
        this.listQuery.params.fileId = val
        this.listQuery.current = 1
        this.load()
      }
    },
    userId: {
      handler(val) {
        this.listQuery.params.userId = val
        this.listQuery.current = 1
        this.load()
      }
    }
  },

  created() {
    this.listQuery.params.courseId = this.courseId
    this.listQuery.params.fileId = this.fileId
    this.listQuery.params.userId = this.userId
    this.load()
  },

  methods: {

    load() {
      this.loading = true

      if (this.listQuery.current === 1) {
        this.dataList = []
      }
      facePaging(this.listQuery).then(res => {
        const list = res.data.records
        for (let i = 0; i<list.length; i++) {
          this.dataList.push(list[i])
        }

        this.totalPage = res.data.pages
        this.listQuery.current += 1
        this.loading = false
      }).catch(() => {
        this.loading = false
      })
    }
  }
}
</script>

<style scoped>

.infinite-list {
  display: flex;
  flex-wrap: wrap;
}

.infinite-list-item {
  list-style: none;
  width: 200px;
}
</style>
